<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>s02-Vue实例</title>
		<script src="../vue.js"></script>
	</head>
	<body>
		<div id="app1">
			<p>{{foo}}</p>
			<!-- 这里的 `foo` 不会更新！ -->
			<button v-on:click="foo = baz">change it</button>
		</div>
		<div id="app2"></div>
		
		
		
		
		<script type="text/javascript">
			var data = {a: 1}
			var vm = new Vue({
				data: data
			})
			
			data = {
				newTodoText: '',
				visitCount: 0,
				hideCompletedTodos: false,
				todos: [],
				error: null
			}
			
			var obj = {
				foo: 'bar'
			}
			
			Object.freeze(obj)
			
			new Vue({
				el: '#app1',
				data: obj
			})
			
			var vm = new Vue({
				el: '#app2',
				data: data
			})
			
			vm.$data === data // result: true
			vm.$el === document.getElementById('app2') // result: true
			// $watch 是一个实例方法
			vm.$watch('a', function(newValue, oldValue) {
				// 这个回调将在 `vm.a` 改变后调用
			})
			
			// 实例生命周期钩子
			new Vue({
				data: {a: 1},
				created: function() {
					// `this` 指向 vm 实例
					console.log('a is ' + this.a)
				}
			})
			
		</script>
	</body>
</html>
